<template>
	<view class="content">
		<view style="font-size: 34rpx;margin-bottom: 40rpx;margin-top: 30rpx;">
			{{step == 0 ? '设置支付密码' : '重复输入密码'}}
		</view>

		<view style="width: 100%;" v-if="step == 0">
			<view style="width: 80%;height: 1rpx;background: #fff;margin: 20rpx auto;"></view>
			<view style="width: 100%;display: flex;justify-content: center;">
				<u-message-input disabled-keyboard :value="value0" dot-fill width="80" maxlength="6"></u-message-input>
			</view>
			<view style="width: 80%;height: 1rpx;background: #fff;margin: 20rpx auto;"></view>
			<view style="width: 100%;position: fixed;bottom: 0rpx;left: 0rpx;">
				<u-table :padding="'0px 0px'">
					<u-tr>
						<u-td>
							<view @click="tapthd(1)" class="ttgd">
								1
							</view>
						</u-td>
						<u-td>
							<view @click="tapthd(2)" class="ttgd">
								2
							</view>
						</u-td>
						<u-td>
							<view @click="tapthd(3)" class="ttgd">
								3
							</view>
						</u-td>
					</u-tr>
					<u-tr>
						<u-td>
							<view @click="tapthd(4)" class="ttgd">
								4
							</view>
						</u-td>
						<u-td>
							<view @click="tapthd(5)" class="ttgd">
								5
							</view>
						</u-td>
						<u-td>
							<view @click="tapthd(6)" class="ttgd">
								6
							</view>
						</u-td>
					</u-tr>
					<u-tr>
						<u-td>
							<view @click="tapthd(7)" class="ttgd">
								7
							</view>
						</u-td>
						<u-td>
							<view @click="tapthd(8)" class="ttgd">
								8
							</view>
						</u-td>
						<u-td>
							<view @click="tapthd(9)" class="ttgd">
								9
							</view>
						</u-td>
					</u-tr>
					<u-tr>
						<u-td>
							<view class="ttgd" style="background: #e2e2e2;">

							</view>
						</u-td>
						<u-td>
							<view @click="tapthd(0)" class="ttgd">
								0
							</view>
						</u-td>
						<u-td>
							<view @click="backspace" class="ttgd" style="background: #e2e2e2;">
								<image src="/static/images/ttui.png" style="width: 50rpx;" mode="widthFix"></image>
							</view>
						</u-td>
					</u-tr>
				</u-table>
			</view>
		</view>

		<view style="width: 100%;" v-if="step == 1">
			<view style="width: 80%;height: 1rpx;background: #fff;margin: 20rpx auto;"></view>
			<view style="width: 100%;display: flex;justify-content: center;">
				<u-message-input disabled-keyboard :value="value1" dot-fill width="80" maxlength="6" ></u-message-input>
			</view>
			<view style="width: 80%;height: 1rpx;background: #fff;margin: 20rpx auto;"></view>
			<view style="width: 100%;position: fixed;bottom: 0rpx;left: 0rpx;">
				<u-table :padding="'0px 0px'">
					<u-tr>
						<u-td>
							<view @click="tapthd(1)" class="ttgd">
								1
							</view>
						</u-td>
						<u-td>
							<view @click="tapthd(2)" class="ttgd">
								2
							</view>
						</u-td>
						<u-td>
							<view @click="tapthd(3)" class="ttgd">
								3
							</view>
						</u-td>
					</u-tr>
					<u-tr>
						<u-td>
							<view @click="tapthd(4)" class="ttgd">
								4
							</view>
						</u-td>
						<u-td>
							<view @click="tapthd(5)" class="ttgd">
								5
							</view>
						</u-td>
						<u-td>
							<view @click="tapthd(6)" class="ttgd">
								6
							</view>
						</u-td>
					</u-tr>
					<u-tr>
						<u-td>
							<view @click="tapthd(7)" class="ttgd">
								7
							</view>
						</u-td>
						<u-td>
							<view @click="tapthd(8)" class="ttgd">
								8
							</view>
						</u-td>
						<u-td>
							<view @click="tapthd(9)" class="ttgd">
								9
							</view>
						</u-td>
					</u-tr>
					<u-tr>
						<u-td>
							<view class="ttgd" style="background: #e2e2e2;">

							</view>
						</u-td>
						<u-td>
							<view @click="tapthd(0)" class="ttgd">
								0
							</view>
						</u-td>
						<u-td>
							<view @click="backspace" class="ttgd" style="background: #e2e2e2;">
								<image src="/static/images/ttui.png" style="width: 50rpx;" mode="widthFix"></image>
							</view>
						</u-td>
					</u-tr>
				</u-table>
			</view>
		</view>


		<!-- <view style="width: 46%;padding: 25rpx;padding-top: 0rpx;margin: 160rpx auto;">
			<u-button @click="saveuser" type="primary">确定</u-button>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value0: '',
				value1: '',
				step: 0
			}
		},
		onLoad() {

		},
		methods: {
			tapthd: async function(e) {
				if (this.step == 0) {
					this.value0 = this.value0 + e
					if (this.value0.length >= 6) {
						this.step = 1
						return
					}
				} else {
					this.value1 = this.value1 + e
					if (this.value1.length >= 6) {
						if (this.value0 != this.value1) {
							uni.showToast({
								title: "两次密码不一致",
								icon: "none"
							})
							this.value0 = ''
							this.value1 = ''
							this.step = 0
							return
						} else {
							const user = this.$store.state.user.user
							const ret = await this.$u.put(`bgyx/bgyx/putdata/user`,{
								id:user.id,
								paypswd:this.value0
							})
							this.$store.commit(`user/setUserData`,{
								paypswd:this.value0
							})
							uni.showModal({
								title:"设置成功",
								content:"支付密码已设置",
								showCancel:false,
								success() {
									uni.navigateBack()
								}
							})
						}
					}
					
				}
			},
			backspace: function() {
				if(this.step == 0){
					if(!this.value0){
						return
					}
					this.value0 = this.value0.substring(0, this.value0.length - 1)
				}else{
					if(!this.value1){
						return
					}
					this.value1 = this.value1.substring(0, this.value1.length - 1)
				}
			},
		}
	}
</script>

<style scoped>
	.content {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #f3f3f3;
		padding: 25rpx;
	}

	.ttgd {
		display: flex;
		height: 100rpx;
		align-items: center;
		justify-content: center;
		font-weight: 500;
		font-size: 36rpx;
		color: #222;
	}
</style>